<!--
 * @Author: wangshuguang
 * @Date: 2022-02-16 14:23:49
 * @LastEditTime: 2022-09-13 14:10:56
 * @LastEditors: wangshuguang
 * @Description: 商户套餐管理
-->
<template>
  <el-card class="common-container">
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <el-form-item label="机构/业务编号">
        <el-input v-model="listQuery.orgInfo" placeholder="机构/业务编号" size="small" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round size="small" @click="fetchData(true)">查询</el-button>
        <el-button type="primary" round size="small" @click="addData">新增配置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="list"
      border
      style="width: 100%"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
    >
      <el-table-column label="序号" width="50" prop="id">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column
        prop="orgName"
        label="机构"
        width="180"
      />
      <el-table-column
        prop="orgId"
        label="业务编码"
        width="180"
      />
      <el-table-column
        prop="address"
        label="月套餐"
      >
        <template slot-scope="scope">
          <mercPgkColumn :data-list="scope.row.monthArr" />
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="季套餐"
      >
        <template slot-scope="scope">
          <mercPgkColumn :data-list="scope.row.seasonArr" />
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="半年套餐"
      >
        <template slot-scope="scope">
          <mercPgkColumn :data-list="scope.row.halfYearArr" />
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="年套餐"
      >
        <template slot-scope="scope">
          <mercPgkColumn :data-list="scope.row.yearArr" />
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="交互次数套餐"
      >
        <template slot-scope="scope">
          <mercPgkColumn :data-list="scope.row.interactiveArr" />
          <span v-if="scope.row.interactiveArr.length == 0"> - </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间"
      />
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="editdata(scope.row)">修改配置</el-button>
          <el-button size="small" type="primary" @click="seeInfo(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-drawer
      :title="infoConfig.title"
      :visible.sync="infoVisible"
      size="50%"
      direction="rtl"
    >
      <mercPackageManageInfo v-if="infoVisible" :info-config="infoConfig" @close="infoVisible = false" @sucClose="sucClose" />
    </el-drawer>
  </el-card>
</template>

<script>
import { merchantConfList } from '@/api/flowConf'
import mercPackageManageInfo from './components/mercPackageManageInfo.vue'
import mercPgkColumn from './components/mercPgkColumn.vue'

export default {
  components: { mercPackageManageInfo, mercPgkColumn },
  data() {
    return {
      infoVisible: false,
      infoConfig: {
        title: '',
        data: {}
      },
      form: {},
      scope: 0,
      total: 0,
      statusOptions: ['停用', '正常'],
      listQuery: {
        pageNum: 0,
        pageSize: 10,
        orgInfo: ''
      },
      list: []
    }
  },

  mounted() {
    this.fetchData(true)
  },
  methods: {
    sucClose() {
      this.infoVisible = false
      this.fetchData()
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if ([0, 1, 2, 8, 9].includes(columnIndex)) {
        return {
          rowspan: row.rowspan,
          colspan: 1
        }
      }
    },
    // 新增配置
    addData() {
      this.infoConfig = {
        type: 'add',
        title: '新增配置'
      }
      this.infoVisible = true
    },
    // 查看详情
    seeInfo(data) {
      this.infoConfig = {
        type: 'seeInfo',
        title: '查看配置',
        data: {
          // merchantPackageConfs: data.merchantPackageConfs,
          ...data
        }
      }
      console.log('查看详情', this.infoConfig)
      this.infoVisible = true
    },
    // 修改配置
    editdata(data) {
      this.infoConfig = {
        type: 'edit',
        title: '修改配置',
        data: {

          ...data
        }
      }
      console.log('修改配置', this.infoConfig)
      this.infoVisible = true
    },
    viewData(data) {
      this.infoConfig = {
        type: 'detail',
        title: '详情',
        data: {
          merchantPackageConfs: data.merchantPackageConfs,
          orgBaseInfo: data.orgBaseInfo
        }
      }
      this.infoVisible = true
    },
    // 获取表格数据
    fetchData(isInit = false) {
      if (isInit) {
        this.listQuery.pageNum = 1
      }
      merchantConfList(this.listQuery).then(res => {
        if (res.code === 0) {
          this.list = res.data.list.map(el => {
            const headquarters = el.merchantPackageConfs
            const yearArr = []
            const monthArr = []
            const seasonArr = []
            const halfYearArr = []
            const interactiveArr = []
            for (let i = 0; i < headquarters.length; i++) {
              // 套餐类型 0：月套餐；1：年套餐；2：交互套餐；3：季套餐；4：半年套餐
              const obj = headquarters[i]
              const item = {
                ...obj,
                // 流量次数转换为 万次
                monthFlow: this.$math.div(obj.monthFlow, 10000),
                pkgSpecificListStr: obj.pkgSpecificList.join('\n'),
                mercScope: obj.pkgSpecificList && obj.pkgSpecificList.length ? '1' : '0' // 适用商户
              }
              if (item.type == '0') {
                monthArr.push(item)
              } else if (item.type == '1') {
                yearArr.push(item)
              } else if (item.type == '2') {
                interactiveArr.push(item)
              } else if (item.type == '3') {
                seasonArr.push(item)
              } else if (item.type == '4') {
                halfYearArr.push(item)
              }
            }
            console.log('seasonArr', seasonArr, 'halfYearArr', halfYearArr)
            return {
              ...el.orgBaseInfo,
              yearArr,
              monthArr,
              interactiveArr,
              seasonArr,
              halfYearArr
            }
          })
          this.total = res.data.total
          console.log('获取表格总数据', this.list)
        }
      })
    },
    toRolesName(roles) {
      const rolesNames = []
      for (let i = 0; i < roles.length; i++) {
        rolesNames.push(roles[i].name)
      }
      return rolesNames.join(',')
    },
    handleEdit(user) {
      this.$refs.userDialog.openEdit(user.id).then(() => {
        this.fetchData()
      })
    },

    handleFilter() {
      this.fetchData()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.fetchData()
    },
    handleResetPassword(user) {
      this.$refs.resetPw.open(user.id)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.search-container {
	margin-top: 20px;
	margin-bottom: 20px;
}

.search-wrap {
	width: 300px;
	margin-right: 10px;
}
.el-button--primary:hover,
.el-button--primary:focus {
	background-color: $btnBgc;
	border-color: $btnBgc;
}
</style>
